<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>echarts展示</title>
	<meta name="keywords" content="">
	<meta name="description" content="">

	<link rel="shortcut icon" href="favicon.ico">
	<link href="${path}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="${path}/css/font-awesome.css?v=4.4.0" rel="stylesheet">

	<!-- Data Tables -->
	<link href="${path}/css/plugins/dataTables/dataTables.bootstrap.css"
		rel="stylesheet">
	<link href="${path}/css/animate.css" rel="stylesheet">
	<link href="${path}/css/style.css?v=4.1.0" rel="stylesheet">
	
	<link rel="stylesheet" type="text/css" href="${path}/dist/sweetalert.css">
</head>
<body class="gray-bg">
	<div id="myshow" style="width: 500px;height: 500px"></div>

</body>
<!-- 全局js -->
<script src="${path}/js/echarts/echarts.min.js"></script>
<script src="${path}/js/jquery.min.js?v=2.1.4"></script>
<script type="text/javascript">

	aaa();
	function  aaa(){
		var chartDom = document.getElementById('myshow');
		var myChart = echarts.init(chartDom,'dark');
		var option;

		$.get("${path}/late",function (data) {
			option = {
				title: {
					text: '考勤迟到数据',
					subtext: '考勤',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left'
				},
				series: [
					{
						name: 'Access From',
						type: 'pie',
						radius: '50%',
						data:data,
						/*data: [
							{ value: 1, name: 'Search Engine' },
							{ value: 735, name: 'Direct' },
							{ value: 580, name: 'Email' },
							{ value: 484, name: 'Union Ads' },
							{ value: 300, name: 'Video Ads' }
						],*/
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			option && myChart.setOption(option);
		},"json");



	}
</script>
</html>
